<script setup lang="ts">
import { showToast } from 'vant'
const onSubmit = () => showToast('点击按钮')
import { ref, watch } from 'vue'

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '@/stores/LXZ.ts'
import router from '@/router';

import { Toast } from 'vant'

// 获取pinia实例内容
const Ordersdata = FilmDataObj()

// 获取pinia数据使用这种方式
const { CurrentOrders } = storeToRefs(Ordersdata)
// console.log('初始化', CurrentOrders)

const { switchOrdersArray } = Ordersdata

// 弹起支付页
let payShow = ref(false)
const payClick = () => {
  payShow.value = !payShow.value
}

// 支付密码
let PAWvalue = ref('')

watch(PAWvalue, (newV) => {
  if (newV.length >= 6) {
    // YesAddOrders()
    switchOrdersArray(CurrentOrders.value.OrderNumber)
    payShow.value = false
    showToast('支付成功');
    router.back()


  }
})
</script>
<template>
  <div class="order">
    <header>
      <van-icon name="arrow-left" color="#000" size="24" @click="$router.back()" />
      <div class="title">订单详情</div>
    </header>
    <div class="public">
      <div class="vote">
        <div>
          <van-image
            width="70rem"
            height="100rem"
            fit="cover"
            radius="8rem"
            :src="CurrentOrders.img"
          />
        </div>
        <div class="vote-info">
          <div class="nm">{{ CurrentOrders.name }}</div>
          <div class="time">{{ CurrentOrders.dateinfo }}</div>
          <div class="cinema">{{ CurrentOrders.CMname }}</div>
          <div class="sit">
            {{ CurrentOrders.lobbySeats }} 普通

            <span v-for="(item, index) of CurrentOrders.Seat" :key="index">
              {{ item }} &nbsp;
            </span>
          </div>
          <div class="count">{{ CurrentOrders.price / 38 }}张 原价￥{{ CurrentOrders.price }}</div>
        </div>
      </div>
      <div class="vote" style="justify-content: space-between">
        <div class="service">
          <div>
            <van-icon name="checked" color="#4b9d71" size="14rem" />
            <span>限时退票</span>
          </div>
          <div style="margin-left: 12rem">
            <van-icon name="checked" color="#4b9d71" size="14rem" />
            <span>限时改签</span>
          </div>
        </div>
        <div class="detail">查看详情 <van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="public">
      <div class="discounts">
        <p class="title">订单优惠</p>
        <div class="cart">
          <div>影票活动与优惠</div>
          <div class="no">无可用</div>
        </div>
        <div class="cart">
          <div>猫享卡</div>
          <div class="no">无可用</div>
        </div>
        <div class="cart">
          <div>观影卡</div>
          <div class="no">无可用</div>
        </div>

        <template v-if="CurrentOrders.FootArr.length > 0">
          <p class="title">附加内容</p>

          <div class="cart" v-for="(item, index) of CurrentOrders.FootArr" :key="index">
            <div class="title">{{ item.name }}</div>
            <div class="no">x{{ item.num }}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="public">
      <div class="phone">
        <div style="display: flex; justify-content: space-between">
          <span>手机号</span> <span>136****9999</span>
        </div>
        <div class="tip">仅用于生成订单，取票码不再通过短信发送</div>
      </div>
    </div>
    <div class="public" style="padding-bottom: 60rem">
      <div class="phone">
        <div>购票须知</div>
        <div class="tip">
          1.请提前30分钟左右到达影院现场，通过影院自助取票机完成取票。<br />
          2.若取票过程中遇到无法取票等其它问题，请联系影院工作人员进行处理。<br />
          3.请及时关注电影开场时间，凭票有序检票入场。<br />
          4.如需开具电影票发票，可联系影院工作人员凭当日票根进行开具，若遇到特殊情况请及时联系猫眼客服人员。<br />
          5.退票、改签服务请参考影院具体政策要求，特殊场次及部分使用卡、券场次订单可能不支持此服务。<br />
          6.客服电话:1010-5335，工作时间:9:00-22:00，国家法定节假日延至24:00。
        </div>
      </div>
    </div>
    <van-submit-bar
      :price="CurrentOrders.Allprice * 100"
      button-text="提交订单"
      @submit="payClick"
    />

    <!-- 支付密码弹出层 -->
    <van-popup
      v-model:show="payShow"
      round
      position="bottom"
      :style="{ height: '400rem' }"
      class="PAWshow"
    >
      <div class="title">请输入支付密码</div>
      <van-password-input
        :value="PAWvalue"
        :focused="payShow"
        @focus="payShow = true"
        style="padding-top: 40rem"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="PAWvalue" :show="payShow" @blur="payShow = false" />
    </van-popup>
  </div>
</template>
<style lang="less" scoped>
.order {
  background: linear-gradient(to bottom, #f8d9d6, #fff);
  height: 100vh;

  header {
    display: flex;
    align-items: center;
    padding: 12rem 6rem;

    .title {
      width: 90%;
      text-align: center;
      font-size: 14rem;
      font-weight: bold;
    }
  }

  .public {
    width: 94%;
    margin: auto;
    margin-top: 8rem;
    background: #fff;
    border-radius: 12rem;
  }

  .vote {
    padding: 12rem;
    display: flex;

    .vote-info {
      margin-left: 8rem;
      font-size: 12rem;
      color: #adadad;
      line-height: 20rem;

      .nm {
        font-size: 14rem;
        color: #000;
        font-weight: 600;
      }

      .time {
        color: #383838;
        font-weight: 600;
      }
    }

    .service {
      display: flex;
      font-size: 12rem;
      align-items: center;

      span {
        margin-left: 4rem;
        color: #bbbbbb;
      }
    }

    .detail {
      color: #8e8e8e;
      font-size: 12rem;
      margin-right: 12rem;
    }
  }

  .discounts {
    font-size: 14rem;
    padding: 8rem 12rem;
    line-height: 32rem;

    .title {
      font-size: 15rem;
      font-weight: bold;
      margin: 0;
    }

    .cart {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 14rem;
        color: #6c6c6c;
        font-weight: normal;
      }

      .no {
        color: #adadad;
      }
    }
  }

  .phone {
    font-size: 14rem;
    padding: 8rem 12rem;
    line-height: 22rem;

    .tip {
      color: #8e8e8e;
      font-size: 12rem;
    }
  }
}

// 输入密码弹出样式
.PAWshow {
  .title {
    padding: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 20;
  }
}
</style>